'use client';

import type { IQueryPostDetails } from '@/interfaces';

export default function QueryPostCount({
  details,
}: {
  details: IQueryPostDetails;
}) {
  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-activity me-2"></i>
            数量
          </div>

          <div className="card-body">
            <div className="row">
              <div className="col">
                <div className="d-flex flex-column text-center">
                  <div className="my-2">评论数</div>
                  <div>{details.details.commentCount}</div>
                </div>
              </div>

              <div className="col">
                <div className="d-flex flex-column text-center">
                  <div className="my-2">回复数</div>
                  <div>{details.details.replyCount}</div>
                </div>
              </div>

              <div className="col">
                <div className="d-flex flex-column text-center">
                  <div className="my-2">浏览数</div>
                  <div>{details.details.viewCount}</div>
                </div>
              </div>

              <div className="col">
                <div className="d-flex flex-column text-center">
                  <div className="my-2">点赞数</div>
                  <div>{details.details.likeCount}</div>
                </div>
              </div>

              <div className="col">
                <div className="d-flex flex-column text-center">
                  <div className="my-2">关注数</div>
                  <div>{details.details.followCount}</div>
                </div>
              </div>

              <div className="col">
                <div className="d-flex flex-column text-center">
                  <div className="my-2">收藏数</div>
                  <div>{details.details.favoriteCount}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
